@charset "utf-8";

@import "common";
@import  "reset";

.web{
    height: 100%;
    overflow:scroll; 

    header{
        .nav{
            margin: vw(50px) vw(25px) vw(20px) vw(25px);
            width: vw(705px);
            height: vw(60px);
            display: flex;
            justify-content: space-between;
            .back{
                display: inline-block;
                width: vw(125px);
                height: vw(60px);
                border-radius: vw(30px);
                
                box-sizing: border-box;
                border: 1px solid $index_color;
                text-align: center;
                span{
                    font-size: vw(30px);
                }
              
            }
            span{
                line-height: vw(60px);
            }
            .city_box{
                position: relative;
                width: vw(164px);
                height: vw(60px);
                border: 2px solid $index_color;
                box-sizing: border-box;
                padding-left:vw(14px) ;
                select{
                    width: 100%;
                    height: 100%;
                    border: none;
                    appearance: none;
                    -webkit-appearance: none;
                    // 兼容性问题 去掉标签自带样式
                }
                &::after{
                    content: "";
                    // 伪对象属性一定要右content
                    position: absolute;
                    top: 10px;
                    left: 50px;
                    width:0;
                    height:0;
                    border-width:8px 8px 8px 8px;
                    border-style:solid;
                    border-color:$index_color transparent transparent ;
                   
                }
        
            }
        }


        .search_box {
            margin:vw(40px) auto vw(20px);
            position: relative;
            height: 100%;
            height: 100%;
            width: vw(268px);
            height: vw(54px);
            box-sizing: border-box;
            //    保证盒子还是设定的宽高,不会让边距往里面压
            border-color: $index_color;
            border: 2px solid $index_color;
            border-radius: vw(27px);
            form {
                width: 100%;
                height:100%;
                display: flex;
                box-sizing: border-box;
                justify-content: space-around;
                align-items: center;
                padding-left:vw(20px) ;
              input {
                  width: vw(180px);
                  height: vw(40px);
                  font-size: vw(24px);
                  color: #777777;
                  border: none;
                  outline: none;
              }
              button {
                  color: $index_color;
                  background-color: transparent;
                  border: none;
      
              }
            }
          }
    }


    section{
        .search_type{
           text-align: center;
           margin-bottom: vw(15px);
        }
        .row{
           
            width: vw(540px);
            margin:  auto;
            .gray_box{
                display: inline-block;
                width: vw(125px);
                height: vw(60px);
                background-color: #dcdcdc;
                text-align: center;
                color: #a0a0a0;
                font-size: vw(20px);
                line-height: vw(60px);
                margin-bottom:vw(5px) ;
            }
        }
        .more{
            position: relative;
            .right{
              padding-top: vw(20px);
              padding-left: vw(20px);
              i{
                padding-left: vw(10px);
                font-size: vw(30px);
                  color: $index_color;
              }
              span{
                  
                  font-size:vw(30px) ;
                  vertical-align: super;
              }
            }
            display: flex;
            justify-content: space-between;
            .left{
                padding-top: vw(50px);
                display: inline-block;
                span{
                    font-size: vw(24px);
                    vertical-align: super;
                    line-height: vw(24px);
                }
            .box{
                
              //   margin-top: vw(50px);
              margin-right:vw(22px) ;
                display: inline-block;
                width: vw(28px);
                height: vw(28px);
                border-radius: vw(25px);
                box-sizing: border-box;
                border: 1px solid $index_color;
                i{
                  font-size: vw(25px);
                  vertical-align: super;
                  color: $index_color;
              }
            }
          }
  
        }
        .image_box{
            margin-left: vw(23px);
            margin-top:vw(30px) ;
            .left{
                display: inline-block;
                img{
                    width: vw(278px);
                    height: vw(351px);
                }
            }
            .right{
                
                display: inline-block;
                .right_top{
                    img{
                        width: vw(420px);
                        height: vw(146px);
                    }
                
                }
                .right_bottom{
                    img{
                        width: vw(207px);
                        height: vw(195px);
                    }
                    

                }
            }
            
        }

        .image_row{
            display: flex;
            justify-content: space-around;
            img{
                width: vw(225px);
                height: vw(220px);
            }
        }








    }
}
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #bbb9ba;
        width: 100%;
        background-color: #fff;
        height: vw(120px);
        .left_right{
            margin-left: vw(50px);
            margin-right:vw(50px) ;
        ul {
          
    
            padding: r(15px) 0 r(12px);
            li {
    
                width: 25%;
                text-align: center;
                position: relative;
                a {
                    color: #8b8b8b;
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    i {
                        font-size: r(38px);
                        color: $index_color;
                    }
                    p {
                        font-size: r(18px);
                    }
                    &.active {
                        color: $index_color;
                    }
                }
            }
        }
    
    }
    





}